<template>
  <div>
    <el-row style="width: 92%;margin: 20px auto">
      <el-button @click="showAddfood = true" plain>新增商品</el-button>
    </el-row>
    <el-table :data="foodList" style="width: 92%;margin: 10px auto">
      <el-table-column prop="hash.typename" label="商品类型">
      </el-table-column>
      <el-table-column prop="hash.mixname" label="名称">
      </el-table-column>
      <el-table-column prop="hash.amount" label="价格">
      </el-table-column>
      <el-table-column prop="hash.tastename" label="口味">
      </el-table-column>
      <el-table-column prop="hash.fixname" label="配菜" sortable>
      </el-table-column>
      <el-table-column prop="hash.description" label="描述">
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="primary" @click="changeFood(scope.row)">修改</el-button>
          <el-button type="text" size="primary" @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="新增商品"
      :visible.sync="showAddfood"
      width="60%"
    >
      <el-form labelWidth="100px">
        <el-form-item label="商品类型">
          <el-select v-model="foodType" placeholder="请选择商品类型" style="width:100%">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="foodName"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="foodPrice"></el-input>
        </el-form-item>
        <el-form-item label="选择口味" v-if="this.foodType==1">
          <el-checkbox-group
            v-model="checkedTaste"
          >
            <el-checkbox v-for="item in tasteList" :label="item.hash.code" :key="item.hash.id">{{item.hash.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="选择配菜" v-if="this.foodType==1">
          <el-checkbox-group
            v-model="checkedFix"
          >
            <el-checkbox v-for="item in fixList" :label="item.hash.code" :key="item.hash.id">{{item.hash.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="选择份量" v-if="this.foodType==1">
          <el-radio v-model="foodSize" label="大份">大份</el-radio>
          <el-radio v-model="foodSize" label="中份">中份</el-radio>
          <el-radio v-model="foodSize" label="小份">小份</el-radio>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="foodDes"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddfood = false">取 消</el-button>
        <el-button type="primary" @click="newfood">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改商品"
      :visible.sync="reviseFood"
      width="40%"
    >
      <el-form labelWidth="100px">
        <el-form-item label="商品类型">
          {{foodData1.typename}}
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="foodData1.pname"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="foodData1.amount"></el-input>
        </el-form-item>
        <el-form-item label="选择口味" v-if="foodData1.type==1">
          <el-checkbox-group
            v-model="checkedTaste"
          >
            <el-checkbox v-for="item in tasteList" :label="item.hash.code" :key="item.hash.id">{{item.hash.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="选择配菜" v-if="foodData1.type==1">
          <el-checkbox-group
            v-model="checkedFix"
          >
            <el-checkbox v-for="item in fixList" :label="item.hash.code" :key="item.hash.id">{{item.hash.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="选择份量" v-if="foodData1.type==1">
          <el-radio v-model="foodData1.fromat" label="大份">大份</el-radio>
          <el-radio v-model="foodData1.fromat" label="中份">中份</el-radio>
          <el-radio v-model="foodData1.fromat" label="小份">小份</el-radio>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="foodData1.description"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviseFood = false">取 消</el-button>
        <el-button type="primary" @click="saveChangefood">修 改 </el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      foodType: '',
      foodName: '',
      foodPrice: '',
      foodDes: '',
      foodSize: '',
      checkedTaste: [],
      checkedFix: [],
      tasteDes: '',
      typename: '',
      ts: this.newStore(),
      showAddfood: false,
      reviseFood: false,
      abelPosition: 'right',
      foodList: [],
      foodData1: {},
      foodData2: [],
      foodData3: [],
      tasteList: [],
      fixList: [],
      typeList: [{
        value: '1',
        label: '主食',
      }, {
        value: '2',
        label: '小吃',
      }, {
        value: '3',
        label: '饮料',
      }],
    };
  },
  created() {
    this.getFoodList();
    this.getTFList();
  },
  methods: {
    saveChangefood() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142883D0F8D3FCA25AD055B7B10DDEF68862D51C9A12806E8B1',
        pid: this.foodData1.pid,
        pname: this.foodData1.pname,
        description: this.foodData1.description,
        fromat: this.foodData1.fromat,
        amount: this.foodData1.amount,
        type: this.foodData1.type,
        tastcode: this.checkedTaste,
        fixcode: this.checkedFix,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.$message({
          message: '修改成功！',
          type: 'success',
        });
        this.getFoodList();
        this.reviseFood = false;
      });
    },
    changeFood(item) {
      this.reviseFood = true;
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142C2E4380F763630A4055B7B10DDEF68862D51C9A12806E8B1',
        productid: item.hash.pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.foodData1 = ts.d.data.operation1[0].hash;
        this.foodData2 = ts.d.data.operation2;
        this.foodData3 = ts.d.data.operation3;
        this.foodData2.forEach((value) => {
          if (value.hash.belongproduct == 1) {
            this.checkedTaste.push(value.hash.code);
          }
        });
        this.foodData3.forEach((value) => {
          if (value.hash.belongproduct == 1) {
            this.checkedFix.push(value.hash.code);
          }
        });
        if (this.foodData1.type == 1) {
          this.foodData1.typename = '主食';
        } else if (this.foodData1.type == 2) {
          this.foodData1.typename = '小吃';
        } else {
          this.foodData1.typename = '饮料';
        }
      });
    },
    newfood() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E901424E95A8D2219E38CB84F6133B4A6F551A',
        pname: this.foodName,
        description: this.foodDes,
        fromat: this.foodSize,
        amount: this.foodPrice,
        type: this.foodType,
        tastcode: this.checkedTaste,
        fixcode: this.checkedFix,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.showAddfood = false;
        this.$message({
          message: '添加成功！',
          type: 'success',
        });
        this.getFoodList();
      });
      this.beforeNew();
    },
    getTFList() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142578A3E9390AE65D1CB4F8AD60F48093D',
        type: '1',
      };
      const req2 = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142578A3E9390AE65D1CB4F8AD60F48093D',
        type: '2',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.tasteList = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req2).then((ts) => {
        this.fixList = ts.d.data.operation1;
      });
    },
    getFoodList() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142578A3E9390AE65D19B1F69C82380B32CF6486B1D96ED9F7E',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.foodList = ts.d.data.operation1;
        for (let i = 0; i < this.foodList.length; i += 1) {
          this.foodList[i].hash.mixname = this.foodList[i].hash.pname + this.foodList[i].hash.fromat;
          if (this.foodList[i].hash.type == 1) {
            this.foodList[i].hash.typename = '主食';
          } else if (this.foodList[i].hash.type == 2) {
            this.foodList[i].hash.typename = '小吃';
            this.foodList[i].hash.tastename = '无';
          } else {
            this.foodList[i].hash.typename = '饮料';
            this.foodList[i].hash.tastename = '无';
          }
        }
      });
    },
    beforeNew() {
      this.foodType = '';
      this.foodName = '';
      this.foodPrice = '';
      this.foodDes = '';
      this.foodSize = '';
      this.checkedTaste = [];
      this.checkedFix = [];
      this.tasteDes = '';
    },
    deleteItem(item) {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142F568A6CE28C87E079345FE062936143A2D51C9A12806E8B1',
        pid: item.hash.pid,
      };
      this.$confirm('是否删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getFoodList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
      this.getFoodList();
    },
  },
};
</script>

<style lang="stylus" scoped>
.num
  display flex
  justify-content space-around
  span
    font-size 24px
.el-col
  padding: 20px 10px;
.c_top
  div
    background #fff
    margin 20px 0
    p
      height 30px
      line-height 30px
      margin-bottom 10px
      &:nth-child(1)
        color #aaa
        span
          &:first-child
            float left
          &:last-child
            float right
            b
              color #409EFF
      &:nth-child(2)
        font-size 30px
        padding-left 25px
      &:last-child
        padding-top 10px
        border-top 1px solid #ccc
        color #aaa
        b
          color black
          float right
</style>
